<template>
  <div class="confirm-container">
    <div><logo-view></logo-view></div>
    <el-descriptions class="margin-top" title="确认信息" :column="1" :size="'large'" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            地址
          </div>
        </template>
        {{ aqiFeedback.province + '/' + aqiFeedback.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone />
            </el-icon>
            预估等级
          </div>
        </template>
        <el-tag>{{ aqiFeedback.estimatedGrade }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <location />
            </el-icon>
            描述信息
          </div>
        </template>
        {{ aqiFeedback.information }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'
import { Iphone, Location } from '@element-plus/icons-vue'
import LogoView from '@/components/login/LogoView.vue'

const aqiFeedbackStore = useAqiFeedbackStore()
const { aqiFeedback } = storeToRefs(aqiFeedbackStore)
</script>

<style scoped lang="scss">
.confirm-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;

  .margin-top {
    width: 350px;
    margin-bottom: 50px;
    .cell-item {
      width: 100px;
    }
  }
}
</style>
